Conversation
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
|
||
| ### Unavailable menu items | ||
|
|
||
| Wrap a `<MenuItem>` and a `<Popover>` with a `<UnavailableMenuItemTrigger>` and apply `isUnavailable` to disable the item's default action and show an informational popover instead. |
There was a problem hiding this comment.
I opted to have put the Popover directly into the example rather than create a UnavailableMenuItemTrigger wrapper in the starters since I felt it might be confusing to have Popover mentioned here but not show up in the example. Open to opinions though, not too bothered if we wanna go the same route as SubmenuTrigger and wrap the Popover in the starters
|
|
||
| let descriptor = style({ | ||
| gridArea: 'descriptor', | ||
| // TODO: currently the unavailable icon is misaligned with the submenu arrow, check with spectrum |
There was a problem hiding this comment.
still waiting for feedback but feel free to weigh in
| // TODO: consider if we should instead pull the RAC defined trigger here into S2. Feels useful for RAC users though, but | ||
| // maybe shouldn't be specific to unavailable. It is very similar to SubmenuTrigger but it renders a dialog type behavior (see useSubmenuTrigger) | ||
| // and has the concept of isUnavailable which will make the item render normally when false | ||
| function UnavailableMenuItemTrigger(props: UnavailableMenuItemTriggerProps): JSX.Element { |
There was a problem hiding this comment.
UnavailableMenuItemTrigger seems a bit specific in RAC honestly, open to opinions if there should be a more generic naming/component
LFDanLu
changed the title
|
Build successful! 🎉 |
| // TODO: this is quite specific, but description and keyboardShortcut above are also very specific | ||
| /** Props for the descriptive element in the end slot inside the menu item (e.g. info icon, chevron). */ | ||
| endSlotProps: DOMAttributes, | ||
|
|
There was a problem hiding this comment.
I'm quite iffy about this, as stated above it is very specific. I think ideally we'd give the user a way to make arbitrary child elements in a MenuItem part of that MenuItem's aria-describedby. I could've opted to just allow the user to provide a generic aria-describedBy to the menu item and then apply ids to various other elements but we already have description and keyboard shortcut handled so figured we may be able to make end slot a thing too
There was a problem hiding this comment.
Also note that due to how collection items work in RAC (aka UnavailableMenuItemTrigger in RAC is a collection branch that only renders the popover child as is), I believe that RAC level change is unavoidable since there isn't a good way to generate a id at the S2 UnavailableMenuItemTrigger level and propagate it down via context
|
Build successful! 🎉 |
|
Build successful! 🎉 |
| * A unavailable menu item trigger is used to wrap a unavailable menu item. When the menu item is unavailable, | ||
| * selecting it opens the wrapped Popover instead of performing the item's action. | ||
| * | ||
| * @version alpha |
There was a problem hiding this comment.
Do we need alpha badges in the docs?
There was a problem hiding this comment.
good call, added. I've opted not to add it for S2 since I think it is fairly simple
|
Build successful! 🎉 |
## API Changes
react-aria-components/react-aria-components:MenuItemRenderProps MenuItemRenderProps {
allowsDragging?: boolean
hasSubmenu: boolean
isDisabled: boolean
isDragging?: boolean
isDropTarget?: boolean
isFocusVisible: boolean
isFocused: boolean
isHovered: boolean
isOpen: boolean
isPressed: boolean
isSelected: boolean
+ isUnavailable?: boolean
selectionBehavior: SelectionBehavior
selectionMode: SelectionMode
}/react-aria-components:UnavailableMenuItemTrigger+UnavailableMenuItemTrigger {
+ children: Array<ReactElement>
+ isUnavailable?: boolean = false
+}/react-aria-components:EndSlotContext+EndSlotContext {
+ UNTYPED
+}/react-aria-components:UnavailableMenuItemTriggerProps+UnavailableMenuItemTriggerProps {
+ children: Array<ReactElement>
+ isUnavailable?: boolean = false
+}@react-aria/menu/@react-aria/menu:MenuItemAria MenuItemAria {
descriptionProps: DOMAttributes
+ endSlotProps: DOMAttributes
isDisabled: boolean
isFocusVisible: boolean
isFocused: boolean
isPressed: boolean
keyboardShortcutProps: DOMAttributes
labelProps: DOMAttributes
menuItemProps: DOMAttributes
}@react-spectrum/s2/@react-spectrum/s2:UnavailableMenuItemTrigger+UnavailableMenuItemTrigger {
+ children: Array<ReactElement>
+ isUnavailable?: boolean = false
+}/@react-spectrum/s2:UnavailableMenuItemTriggerProps+UnavailableMenuItemTriggerProps {
+ children: Array<ReactElement>
+ isUnavailable?: boolean = false
+} |
3 participants
Closes
✅ Pull Request Checklist:
📝 Test Instructions:
Test both the S2 and RAC implementations in both storybook and docs.
🧢 Your Project:
RSP